import Vue from 'vue'
//第一步：引入vuex
import Vuex from 'vuex'
import axios from 'axios'

//第二步：使用vuex这个插件
Vue.use(Vuex)

//第三步：准备好actions(服务员)、mutations(后厨)、state(原材料) ———— 招聘

//actions用于响应组件中的动作
const actions = {
	//响应jia这个动作 ———————— 没有意义的action
	/* jia(miniStore,value){
		miniStore.commit('JIA',value)
	}, */
	
	//响应jian这个动作 ———————— 没有意义的action
	/* jian(miniStore,value){
		miniStore.commit('JIAN',value)
	}, */

	//响应jiaOdd这个动作 ———————— 有意义的action（里面包含业务逻辑）
	jiaOdd(miniStore,value){
		//判断奇偶数
		if(miniStore.state.sum % 2){
			miniStore.commit('JIA',value)
		}
	},

	//响应jiaWait这个动作 ———————— 有意义的action（里面包含业务逻辑）
	jiaWait(miniStore,value){
		setTimeout(()=>{
			miniStore.commit('JIA',value)
		},1000)
	},

	//响应jiaServer这个动作 ———————— 很有意义的action（里面包含网络请求）
	async jiaServer(miniStore){
		const result = await axios.get('https://api.uixsj.cn/hitokoto/get?type=social')
		console.log(result.data)
		miniStore.commit('JIA',result.data.length)
	}
}

//mutations用于操作state中的数据
const mutations = {
	JIA(state,value){
		// console.log('加厨师要工作了，最新的state是：',state.sum,'我要操作的值是:',value)
		state.sum += value
	},
	JIAN(state,value){
		// console.log('减厨师要工作了，最新的state是：',state.sum,'我要操作的值是:',value)
		state.sum -= value
	}
}

//state用于配置整个项目中数据的初始值
const state = {
	sum:1,
	describe:'一个简单的求和',
	author:'张三'
}

const getters = {
	//bigSum函数何时调用？—— 有人使用bigSum的时候
	bigSum(state){
		return state.sum*10
	},
	PenName(state){
		return '尼古拉斯'+state.author
	}
}

//第四步：创建一个store去领导他们
const store = new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})

//暴露store
export default store